<template>
	<view class="temporary-instore-step1-page-content">
		<view class="top-view">
			<scan-input-form-item
				label="托盘码"
				v-model="form.container"
				:msg="msg.container"
				:msg-type="msgType.container"
				@search="onSearchContainer"
				@clear="onClearContainer"
			/>
		</view>
		<view class="list-view">
			<!-- ########### -->
			<view class="list-items-group">
				<view class="list-item" v-for="(item,index) in list" :key="'list-item-'+index">
					<view class="list-item-show">
						<view class="item-row">
							<view class="label">
								<view class="first-label-inner">
									<uni-badge :text="list.length-index" type="primary" size="normal" /><text class="batch-no">批次</text>
								</view>
							</view>
							<view class="content">{{item.materialbatch}}</view>
						</view>
						<view class="item-row">
							<view class="label">物料名称</view>
							<view class="content">{{item.materialname}}</view>
						</view>
						<view class="item-row">
							<view class="label">供应商</view>
							<view class="content">{{item.supplier}}</view>
						</view>
						<view class="item-row">
							<view class="label">尺寸</view>
							<view class="content">{{item.long}}*{{item.wide}}*{{item.high}}</view>
						</view>
						<view class="item-row">
							<view class="label">数量</view>
							<view class="content"><input class="enable-input" v-model.number="item.bindquantity" type="number"/></view>
						</view>
					</view>
				</view>
			</view>
			<!-- ########### -->
		</view>
	</view>
</template>

<script>
import ScanInputFormItem from '@/components/ScanInputFormItem.vue'
import { parseDic } from '@/static/js/utils/index.js'
const defaultForm = {
	container:''
}
export default {
	name:'temporaryInstoreStep1PageContent',
	components:{ScanInputFormItem},
	data() {
		return {
			form: {...defaultForm},
			msg:{
				container:''
			},
			msgType:{
				container:'error'
			},
			list:[],
			container:null
		}
	},
	methods:{
		onSearchContainer(){
			if (!this.form.container) {
				this.msgType.container = 'error'
			  this.msg.container = '请输入托盘码！';
			  return false;
			}
			this.msg.container = '';
			this.getContainerInfo()
		},
		onClearContainer(){
			this.clearFullContainer()
		},
		clearFullContainer(){
			this.clearContainer()
			this.clearBackContainer()
		},
		clearContainer(){
			this.form.container = ''
			this.msg.container = ''
		},
		clearBackContainer(){
			this.container = null
			this.list = []
		},
		getContainerInfo(callback){
			const __setErrMessage = function(__msg) {
				if (!__msg) {
					__msg = '网络错误，请稍后再尝试！'
				}
				this.msgType.container = 'error'
				this.msg.container = __msg;
			}.bind(this)
			let params = {ContainerCode:this.form.container}
			this.$api.get('QuickGetContainer',params,{block:'quickIn',warn:false,fullRes:true}).then((d)=>{
				if (d.data) {
					if (d.data.wmsContainer) {
						this.container = d.data.wmsContainer
						this.list = d.data.wmsMaterials || []
						let _temp1 = parseDic(this.$store,'container_status',this.container.containerStatus)
						this.msgType.container = 'info'
						this.msg.container = `尺寸：${this.container.specLength}*${this.container.specWidth}，状态：${_temp1}`
						callback && callback(true)
					} else {
						this.clearBackContainer()
						__setErrMessage(d.message)
						callback && callback(false)
					}
				} else {
					this.clearBackContainer()
					__setErrMessage(d.message)
					callback && callback(false)
				}
			}).catch((_errmsg)=>{
				this.clearBackContainer()
				__setErrMessage(_errmsg)
				callback && callback(false)
			})
		},
		get(){
			return {
				containerCode:this.container?this.container.containerCode:null,
				wmsMaterials:this.list
			}
		}
	}
}
</script>

<style scoped lang="scss">
.temporary-instore-step1-page-content{
	height: 100%;
	display: flex;
	flex-direction: column;
	&>.top-view{
		flex-shrink: 0;
	}
	&>.list-view{
		height: 1px;
		overflow: auto;
		flex-grow: 1;
		.list-items-group{
			padding-top:12rpx;
			.list-item {
				margin-bottom: 12rpx;
				border-width: 2rpx 0;
				border-style: solid;
				border-color: $uni-border-color;
				&:last-child{
					margin-bottom: 0;
				}
			}
		}
		.list-item-show{
			background-color: $uni-bg-color;
			padding: 0 16rpx;
			font-size: 1.1em;
			.item-row{
				border-bottom: 2rpx dashed $uni-text-color-grey;
				display: flex;
				&>.label{
					opacity: .7;
					flex-shrink: 0;
					width: 130rpx;
					padding-top: 11rpx;
					.first-label-inner{
						display: flex;
						align-items: center;
						.batch-no{
							margin-left: 8rpx;
						}
					}
				}
				&>.content{
					width: 1px;
					flex-grow: 1;
					line-height: 1.5em;
					padding: 8rpx 0;
				}
				&:last-child{
					border-bottom: 0;
				}
			}
		}
	}
}
</style>